<template>
  <div class="dev-intro-container">
    <el-card class="intro-card">
      <div class="header">
        <el-image v-bind:class="{ 'zoom-active': isHoveredAvatar }" class="dev-photo" fit="cover"
                  lazy src="https://i.ibb.co/LC39BXZ/6a63669570d846ed256128cde13ce84.jpg"
                  @mouseover="isHoveredAvatar = true"
                  @mouseleave="isHoveredAvatar = false"

        />
        <div class="donate-info">
          <h2>赞助开发者</h2>
          <el-image alt="Donate QR Code" v-bind:class="{ 'zoom-active': isHoveredCode }" class="donate-code" lazy
                    src="https://i.ibb.co/NtDFyrB/256db4d75187bac79e24ad5cd6382a4.jpg"
                    @mouseover="isHoveredCode = true"
                    @mouseleave="isHoveredCode = false"
          />
        </div>
      </div>
      <div class="body">
        <h1>开发者介绍</h1>
        <!--<p>这里是一段关于我的介绍，可以包括我的经历、技能和兴趣等。</p>-->
        <el-descriptions title="个人信息" :column="2"  :size="size">
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <el-icon :style="iconStyle">
                  <user />
                </el-icon>
                姓名
              </div>

            </template>
            爱coding的小骆
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <el-icon :style="iconStyle">
                  <School />
                </el-icon>
                学校
              </div>
            </template>
            广东工业大学
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <el-icon :style="iconStyle">
                  <Document />
                </el-icon>
                专业
              </div>
            </template>
            大数据管理与应用（大三）
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
                <div class="cell-item">
                  <el-icon :style="iconStyle"><Headset /></el-icon>
              爱好
                </div>
            </template>
            乐器、旅游、健身、编程
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
                <div class="cell-item">
                  <el-icon :style="iconStyle"><Message /></el-icon>
              邮箱
                </div>
            </template>
            <a href="mailto:1545916566@qq.com" style="text-decoration: None ;color: grey">1545916566@qq.com</a>
          </el-descriptions-item>
             <el-descriptions-item>
          <template #label>
             <div class="cell-item">
               <svg t="1719662642705" class="icon" :style="iconStyle" style="width: 18px;height: 18px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2347" width="200" height="200"><path d="M815 193c8.837 0 16 7.163 16 16v606c0 8.837-7.163 16-16 16H209c-8.837 0-16-7.163-16-16V209c0-8.837 7.163-16 16-16h606z m-606-64c-44.183 0-80 35.817-80 80v606c0 44.183 35.817 80 80 80h606c44.183 0 80-35.817 80-80V209c0-44.183-35.817-80-80-80H209z" p-id="2348"></path><path d="M671.853 895h-119.88V575.5H472V465.392l79.973-0.04-0.12-64.858C551.833 310.654 576.225 256 682.17 256h88.21v110.128h-55.121c-41.247 0-43.246 15.376-43.246 44.111l-0.16 55.113H771L759.304 575.46l-87.371 0.04-0.08 319.5z" p-id="2349"></path></svg>
            社交媒体
             </div>
          </template>
          <el-space wrap>
            <el-link type="danger" href="https://www.xiaohongshu.com/user/profile/6135a4cf000000000201b5af" target="_blank">
<!--              <el-icon>-->
<!--                <element-plus/>-->
<!--              </el-icon>-->
              <svg t="1719662793257" class="icon" :style="iconStyle" style="width: 16px;height: 16px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5419" width="200" height="200"><path d="M960 797.248V226.784C960 137.248 886.752 64 797.216 64H226.784C137.248 64 64 137.248 64 226.784v570.464c0 88.64 71.808 161.344 160.16 162.752h575.68c88.32-1.408 160.16-74.08 160.16-162.752" fill="#FF2442" p-id="5420"></path><path d="M700.544 384h50.4v18.048c0 1.44 0.704 2.112 2.08 2.08 29.888-0.896 60 0.064 75.424 30.72 9.184 18.176 7.296 45.824 6.784 67.52-0.032 1.28 0.576 1.984 1.792 2.112 3.52 0.32 6.944 0.64 10.272 1.056 59.424 7.136 47.68 63.168 47.872 107.2 0.096 15.36-1.632 26.592-5.12 33.76-7.36 14.848-20.544 23.36-39.552 25.472H813.44l-18.944-43.968a1.44 1.44 0 0 1 0.096-1.344 1.376 1.376 0 0 1 1.152-0.64l40.192-0.032c2.24 0 4.352-0.96 5.888-2.624a8.896 8.896 0 0 0 2.368-6.176c-0.192-13.44-0.288-26.848-0.224-40.256 0-12.064-5.696-18.24-17.184-18.56-12.992-0.32-37.6-0.32-73.856 0.064-1.28 0-1.92 0.704-1.92 2.08l-0.192 111.456H700.48l-0.16-111.936a1.984 1.984 0 0 0-1.952-2.048h-47.04a2.24 2.24 0 0 1-2.176-2.24l0.064-48.704c0-1.632 0.768-2.464 2.304-2.464l46.496 0.096a2.208 2.208 0 0 0 1.6-0.704 2.432 2.432 0 0 0 0.64-1.664v-42.112a2.784 2.784 0 0 0-2.688-2.848l-28.704 0.128c-1.504 0-2.24-0.8-2.24-2.368l-0.096-48.96c0-1.44 0.64-2.144 2.08-2.144h29.728c1.28 0 1.92-0.64 1.92-2.016l0.32-17.984z m52.192 120.736l31.264-0.064c0.512 0 0.992-0.224 1.344-0.608a2.016 2.016 0 0 0 0.544-1.408l-0.16-39.136c0-3.072-2.24-5.568-4.96-5.568l-25.088 0.064a4.704 4.704 0 0 0-3.52 1.664 5.984 5.984 0 0 0-1.44 4l0.16 39.136c0 1.088 0.864 1.92 1.856 1.92zM429.344 508.256c-12.16 0.224-34.144 3.616-38.944-12.032-2.912-9.344 3.68-22.368 7.68-31.488 11.392-25.952 22.56-52 33.536-78.144 0.448-1.056 1.216-1.6 2.304-1.6h48.096c0.416 0 0.768 0.224 0.96 0.576a1.28 1.28 0 0 1 0.128 1.152l-27.84 65.056c-0.64 1.504-0.48 3.2 0.352 4.608a4.544 4.544 0 0 0 3.84 2.176h41.216c0.512 0 0.96 0.256 1.248 0.672 0.256 0.448 0.32 0.96 0.096 1.44-11.904 27.744-23.776 55.296-35.616 82.656-1.184 2.72-1.696 4.736-1.504 6.016 0.416 2.784 1.984 4.192 4.672 4.224l26.08 0.16c1.504 0.032 1.984 0.768 1.376 2.24l-16.864 39.68a3.328 3.328 0 0 1-3.2 2.208c-26.496 0.32-45.024 0.32-55.584-0.16-17.472-0.8-21.76-16.096-14.976-31.872l23.968-55.936a1.216 1.216 0 0 0-0.096-1.088 1.088 1.088 0 0 0-0.96-0.544zM229.504 671.968h-18.88l-18.496-43.424a1.408 1.408 0 0 1 0.096-1.312 1.28 1.28 0 0 1 1.088-0.64l26.112-0.064a6.112 6.112 0 0 0 5.984-6.24l0.704-230.304a2.24 2.24 0 0 1 2.208-2.304h44.928c2.112 0 3.168 1.12 3.2 3.328 0.192 77.984 0.192 154.624 0 229.952-0.128 30.912-14.464 52.032-46.944 51.008z" fill="#FFFFFF" p-id="5421"></path><path d="M650.944 671.968h-170.432l22.848-51.52a3.04 3.04 0 0 1 2.976-1.952l41.728 0.064c1.472 0 2.24-0.736 2.24-2.24v-156.32c0-1.344-0.64-2.016-1.92-2.016l-27.68-0.032c-1.248 0-2.24-1.088-2.24-2.4v-50.144c0-0.768 0.576-1.408 1.312-1.408h112.832c1.408 0 2.08 0.736 2.08 2.208l0.064 49.6c0 1.44-0.704 2.176-2.112 2.176h-27.904c-1.28 0-1.92 0.672-1.92 2.016v156.224c0 1.504 0.736 2.24 2.144 2.24l44.224 0.096c1.216 0 1.824 0.64 1.824 1.92L650.944 672zM853.92 408.864c34.816-23.936 59.328 37.088 21.184 47.552-6.208 1.728-16.096 1.824-29.632 0.32-1.216-0.128-1.792-0.8-1.792-2.08-0.192-14.4-3.04-36.672 10.24-45.76zM373.312 588.288l-23.04 53.664c-2.08 4.8-4.352 4.896-6.88 0.384-16.96-30.656-22.72-55.68-26.048-93.792-2.56-29.6-4.768-59.2-6.688-88.864-0.064-1.344 0.544-2.016 1.824-2.016l46.688 0.032c1.312 0 2.048 0.704 2.144 2.048 2.4 34.496 4.928 68.896 7.552 103.2 0.672 8.832 2.176 16.16 4.48 21.984a4.16 4.16 0 0 1-0.032 3.36zM128 586.304v-2.208a22.592 22.592 0 0 0 4.16-10.112c3.456-38.08 6.272-76.128 8.48-114.208 0.096-1.184 0.672-1.792 1.792-1.792h47.68c0.416 0 0.832 0.192 1.152 0.544 0.288 0.32 0.448 0.768 0.416 1.216a6351.04 6351.04 0 0 1-8.416 105.184c-2.24 25.44-10.368 59.488-27.36 80.128-1.088 1.312-2.016 1.184-2.72-0.416L128 586.304zM453.184 671.968h-69.056l-8.8-3.488c-1.248-0.48-1.6-1.344-1.024-2.592l21.664-49.6c0.64-1.44 1.664-1.984 3.136-1.6 23.68 6.432 51.104 3.776 75.328 3.872 1.504 0.032 1.92 0.768 1.28 2.176l-22.528 51.2z" fill="#FFFFFF" p-id="5422"></path></svg>
              小红书
            </el-link>
            <!-- Add more social media links here -->
             <el-link type="primary" href="https://weibo.com/u/6394966685" target="_blank">
<!--      <el-icon><Promotion /></el-icon>-->
               <svg t="1719662701632" class="icon" :style="iconStyle" style="width: 18px;height: 18px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3364" width="200" height="200"><path d="M851.4 590.193c-22.196-66.233-90.385-90.422-105.912-91.863-15.523-1.442-29.593-9.94-19.295-27.505 10.302-17.566 29.304-68.684-7.248-104.681-36.564-36.14-116.512-22.462-173.094 0.866-56.434 23.327-53.39 7.055-51.65-8.925 1.89-16.848 32.355-111.02-60.791-122.395C311.395 220.86 154.85 370.754 99.572 457.15 16 587.607 29.208 675.873 29.208 675.873h0.58c10.009 121.819 190.787 218.869 412.328 218.869 190.5 0 350.961-71.853 398.402-169.478 0 0 0.143-0.433 0.575-1.156 4.938-10.506 8.71-21.168 11.035-32.254 6.668-26.205 11.755-64.215-0.728-101.66z m-436.7 251.27c-157.71 0-285.674-84.095-285.674-187.768 0-103.671 127.82-187.76 285.674-187.76 157.705 0 285.673 84.089 285.673 187.76 0 103.815-127.968 187.768-285.673 187.768z" fill="#E71F19" p-id="3365"></path><path d="M803.096 425.327c2.896 1.298 5.945 1.869 8.994 1.869 8.993 0 17.7-5.328 21.323-14.112 5.95-13.964 8.993-28.793 8.993-44.205 0-62.488-51.208-113.321-114.181-113.321-15.379 0-30.32 3.022-44.396 8.926-11.755 4.896-17.263 18.432-12.335 30.24 4.933 11.662 18.572 17.134 30.465 12.238 8.419-3.46 17.268-5.33 26.41-5.33 37.431 0 67.752 30.241 67.752 67.247 0 9.068-1.735 17.857-5.369 26.202a22.832 22.832 0 0 0 12.335 30.236l0.01 0.01z" fill="#F5AA15" p-id="3366"></path><path d="M726.922 114.157c-25.969 0-51.65 3.744-76.315 10.942-18.423 5.472-28.868 24.622-23.5 42.91 5.509 18.29 24.804 28.657 43.237 23.329a201.888 201.888 0 0 1 56.578-8.064c109.253 0 198.189 88.271 198.189 196.696 0 19.436-2.905 38.729-8.419 57.16-5.508 18.289 4.79 37.588 23.212 43.053 3.342 1.014 6.817 1.442 10.159 1.442 14.943 0 28.725-9.648 33.37-24.48 7.547-24.906 11.462-50.826 11.462-77.175-0.143-146.588-120.278-265.813-267.973-265.813z" fill="#F5AA15" p-id="3367"></path><path d="M388.294 534.47c-84.151 0-152.34 59.178-152.34 132.334 0 73.141 68.189 132.328 152.34 132.328 84.148 0 152.337-59.182 152.337-132.328 0-73.15-68.19-132.334-152.337-132.334zM338.53 752.763c-29.454 0-53.39-23.755-53.39-52.987 0-29.228 23.941-52.989 53.39-52.989 29.453 0 53.39 23.76 53.39 52.989 0 29.227-23.937 52.987-53.39 52.987z m99.82-95.465c-6.382 11.086-19.296 15.696-28.726 10.219-9.43-5.323-11.75-18.717-5.37-29.803 6.386-11.09 19.297-15.7 28.725-10.224 9.43 5.472 11.755 18.864 5.37 29.808z" fill="#040000" p-id="3368"></path></svg>
      微博
    </el-link>
    <el-link type="success" href="https://www.douyin.com/user/MS4wLjABAAAA3UfzkyOcAfoUsIJpbguEPx6GUWB9KU9jxhGPI7DAv3o" target="_blank">
<!--      <el-icon><VideoPlay /></el-icon>-->
      <svg t="1719662754779" class="icon" :style="iconStyle" style="width: 16px;height: 16px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4398" width="200" height="200"><path d="M199.111 0H824.89C934.684 0 1024 89.316 1024 199.111V824.89C1024 934.684 934.684 1024 824.889 1024H199.11C89.316 1024 0 934.684 0 824.889V199.11C0 89.316 89.316 0 199.111 0z" fill="#170B1A" p-id="4399"></path><path d="M511.431 302.08c0.569-64.284 0-128.569 0.569-192.853h131.413c-0.569 11.377 1.138 22.755 2.845 33.564h-96.711v522.24c0.569 22.187-5.12 44.373-15.93 63.716-17.066 29.582-48.924 50.062-83.057 52.906-21.618 1.707-43.804-2.275-63.147-13.084-14.79-7.965-27.306-19.342-36.977-32.996 33.564 18.774 77.368 17.067 109.795-3.982C491.52 712.25 512 675.84 512 638.293c-0.569-112.07-0.569-224.142-0.569-336.213z m216.747-36.978c18.204 11.378 38.684 20.48 59.733 25.031 12.516 2.845 25.031 3.983 38.116 3.983v29.582c-37.547-8.534-72.25-29.582-97.85-58.596z" fill="#25F4EE" p-id="4400"></path><path d="M274.773 428.942c47.218-29.582 104.676-41.529 159.29-33.564v31.289c-14.792 0.569-29.014 2.275-43.805 5.12-35.271 7.395-68.836 22.186-97.85 43.804-31.288 23.325-55.181 55.182-71.68 90.453-15.928 33.565-23.892 70.543-23.324 108.09 0 40.96 11.378 80.782 30.72 116.622 9.103 16.497 19.343 32.426 32.996 45.51-27.876-19.342-51.2-45.51-68.267-75.093-23.324-39.253-34.702-85.333-33.564-131.413 1.707-42.098 13.653-83.627 35.84-120.036 19.342-32.426 47.218-60.87 79.644-80.782z" fill="#25F4EE" p-id="4401"></path><path d="M549.547 142.791h97.28c3.413 18.773 10.24 36.409 18.773 53.476 13.653 26.169 32.996 49.493 58.027 64.853 1.706 1.138 2.844 2.276 3.982 3.982 25.6 29.014 60.302 50.062 98.418 58.596 0.569 34.133 0 68.835 0 102.969-64.285 0.569-128.57-19.911-180.907-57.458 0 81.92 0 163.84 0.569 245.76 0 10.809 0.569 21.618 0 32.995-2.845 39.823-15.36 79.076-35.271 113.778-17.067 30.151-40.391 56.89-68.267 77.37-35.84 26.737-80.213 41.528-124.587 42.666-22.755 0.569-45.51-0.57-67.697-5.69-31.29-6.826-60.871-19.91-87.04-38.115l-1.707-1.706c-13.084-13.085-23.893-29.014-32.996-45.511-19.342-35.272-30.72-75.663-30.72-116.623-0.568-36.977 7.396-74.524 23.325-108.089 16.498-35.27 40.96-67.128 71.68-90.453 29.013-21.618 62.578-36.409 97.849-43.804 14.222-2.845 29.013-4.551 43.804-5.12 0.57 13.084 0 26.169 0.57 38.684v66.56c-16.499-5.689-34.703-5.689-51.77-1.707-20.48 4.552-39.822 13.654-55.75 27.307-9.672 8.533-18.205 18.773-23.894 30.151-10.24 19.342-13.654 42.098-11.378 63.716 2.276 21.049 11.378 41.529 25.031 57.458 9.102 11.377 21.049 19.91 32.996 27.875 9.67 13.653 22.186 25.031 36.977 32.996 19.343 10.24 41.53 14.79 63.147 13.084 34.133-2.275 65.991-23.324 83.058-52.907 10.809-19.342 16.498-41.528 15.929-63.715 1.138-175.218 0.569-349.298 0.569-523.378z" fill="#FFFFFF" p-id="4402"></path><path d="M646.827 142.791c11.377 0.569 22.755 0 34.702 0 0 38.116 11.947 76.231 34.133 107.52 2.845 3.982 5.69 7.396 8.534 10.809-25.032-15.36-44.943-38.684-58.027-64.853-8.533-16.498-15.36-34.703-19.342-53.476z m179.2 180.907c12.515 2.844 25.03 3.982 38.115 3.982v132.551c-64.853 0.569-129.706-21.049-182.613-59.164v262.826c0.569 19.911-1.138 39.823-5.689 59.165-12.516 59.164-47.787 112.64-96.711 147.342-26.169 18.773-55.751 31.858-86.471 38.684-37.547 8.534-76.8 7.965-113.778-1.706-43.804-11.378-84.764-35.84-115.484-69.405 26.168 18.774 55.75 31.29 87.04 38.116 22.186 5.12 44.942 6.258 67.697 5.689 44.374-1.138 88.747-15.93 124.587-42.667 27.876-20.48 50.631-47.218 68.267-77.369 19.91-34.702 32.426-73.955 35.27-113.778 0.57-10.808 0.57-21.617 0-32.995-0.568-81.92-0.568-163.84-0.568-245.76 52.338 37.547 116.622 58.027 180.907 57.458-0.57-34.134 0-68.836-0.57-102.97z" fill="#FE2C55" p-id="4403"></path><path d="M434.631 426.098c12.516 0 25.6 0.569 38.116 2.275v135.965c-18.205-6.258-38.685-6.827-57.458-2.276-35.84 7.965-65.991 35.271-78.507 69.974-12.515 34.133-7.395 73.955 14.222 102.968-12.515-7.395-23.893-16.497-32.995-27.875-13.653-15.929-22.756-36.409-25.031-57.458-2.276-21.618 1.138-44.373 11.378-63.715 5.688-11.378 14.222-21.618 23.893-30.152 15.929-13.653 35.84-22.186 55.751-27.306 17.067-3.982 35.271-3.982 51.769 1.706v-66.56c-1.138-11.377-0.569-24.462-1.138-37.546z" fill="#FE2C55" p-id="4404"></path></svg>
      抖音
    </el-link>
          </el-space>
        </el-descriptions-item>
        </el-descriptions>
        <el-descriptions title="额外信息" :column="2"  :size="size">
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
              <svg t="1719662083655" class="icon" :style="iconStyle" style="width: 15px;height: 15px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1221" width="200" height="200"><path d="M945.230769 787.692308h78.769231v78.76923h-78.769231zM945.230769 708.923077h78.769231v78.769231h-78.769231zM945.230769 630.153846h78.769231v78.769231h-78.769231zM866.461538 866.461538h78.769231v78.769231h-78.769231z" fill="#1E2028" p-id="1222"></path><path d="M866.461538 787.692308h78.769231v78.76923h-78.769231zM866.461538 708.923077h78.769231v78.769231h-78.769231zM866.461538 630.153846h78.769231v78.769231h-78.769231z" fill="#FF9343" p-id="1223"></path><path d="M866.461538 551.384615h78.769231v78.769231h-78.769231zM787.692308 945.230769h78.76923v78.769231h-78.76923z" fill="#1E2028" p-id="1224"></path><path d="M787.692308 866.461538h78.76923v78.769231h-78.76923z" fill="#FF9343" p-id="1225"></path><path d="M787.692308 787.692308h78.76923v78.76923h-78.76923zM787.692308 708.923077h78.76923v78.769231h-78.76923zM787.692308 630.153846h78.76923v78.769231h-78.76923z" fill="#FFDD4D" p-id="1226"></path><path d="M787.692308 551.384615h78.76923v78.769231h-78.76923z" fill="#FF9343" p-id="1227"></path><path d="M787.692308 472.615385h78.76923v78.76923h-78.76923zM787.692308 393.846154h78.76923v78.769231h-78.76923zM787.692308 315.076923h78.76923v78.769231h-78.76923zM787.692308 236.307692h78.76923v78.769231h-78.76923zM787.692308 157.538462h78.76923v78.76923h-78.76923zM787.692308 78.769231h78.76923v78.769231h-78.76923zM708.923077 945.230769h78.769231v78.769231h-78.769231z" fill="#1E2028" p-id="1228"></path><path d="M708.923077 866.461538h78.769231v78.769231h-78.769231z" fill="#FF9343" p-id="1229"></path><path d="M708.923077 787.692308h78.769231v78.76923h-78.769231zM708.923077 708.923077h78.769231v78.769231h-78.769231zM708.923077 630.153846h78.769231v78.769231h-78.769231zM708.923077 551.384615h78.769231v78.769231h-78.769231z" fill="#FFDD4D" p-id="1230"></path><path d="M708.923077 472.615385h78.769231v78.76923h-78.769231zM708.923077 393.846154h78.769231v78.769231h-78.769231zM708.923077 315.076923h78.769231v78.769231h-78.769231zM708.923077 236.307692h78.769231v78.769231h-78.769231zM708.923077 157.538462h78.769231v78.76923h-78.769231zM708.923077 78.769231h78.769231v78.769231h-78.769231z" fill="#FF9343" p-id="1231"></path><path d="M708.923077 0h78.769231v78.769231h-78.769231zM630.153846 945.230769h78.769231v78.769231h-78.769231z" fill="#1E2028" p-id="1232"></path><path d="M630.153846 866.461538h78.769231v78.769231h-78.769231z" fill="#FF9343" p-id="1233"></path><path d="M630.153846 787.692308h78.769231v78.76923h-78.769231z" fill="#FFDD4D" p-id="1234"></path><path d="M630.153846 708.923077h78.769231v78.769231h-78.769231zM630.153846 630.153846h78.769231v78.769231h-78.769231z" fill="#1E2028" p-id="1235"></path><path d="M630.153846 551.384615h78.769231v78.769231h-78.769231z" fill="#FFDD4D" p-id="1236"></path><path d="M630.153846 472.615385h78.769231v78.76923h-78.769231zM630.153846 393.846154h78.769231v78.769231h-78.769231zM630.153846 315.076923h78.769231v78.769231h-78.769231zM630.153846 236.307692h78.769231v78.769231h-78.769231zM630.153846 157.538462h78.769231v78.76923h-78.769231zM630.153846 78.769231h78.769231v78.769231h-78.769231z" fill="#FFF1B6" p-id="1237"></path><path d="M630.153846 0h78.769231v78.769231h-78.769231zM551.384615 945.230769h78.769231v78.769231h-78.769231z" fill="#1E2028" p-id="1238"></path><path d="M551.384615 866.461538h78.769231v78.769231h-78.769231z" fill="#FF9343" p-id="1239"></path><path d="M551.384615 787.692308h78.769231v78.76923h-78.769231zM551.384615 708.923077h78.769231v78.769231h-78.769231zM551.384615 630.153846h78.769231v78.769231h-78.769231zM551.384615 551.384615h78.769231v78.769231h-78.769231z" fill="#FFDD4D" p-id="1240"></path><path d="M551.384615 472.615385h78.769231v78.76923h-78.769231zM551.384615 393.846154h78.769231v78.769231h-78.769231zM551.384615 315.076923h78.769231v78.769231h-78.769231zM551.384615 236.307692h78.769231v78.769231h-78.769231zM551.384615 157.538462h78.769231v78.76923h-78.769231zM551.384615 78.769231h78.769231v78.769231h-78.769231zM472.615385 945.230769h78.76923v78.769231h-78.76923z" fill="#1E2028" p-id="1241"></path><path d="M472.615385 866.461538h78.76923v78.769231h-78.76923z" fill="#FF9343" p-id="1242"></path><path d="M472.615385 787.692308h78.76923v78.76923h-78.76923z" fill="#1E2028" p-id="1243"></path><path d="M472.615385 708.923077h78.76923v78.769231h-78.76923zM472.615385 630.153846h78.76923v78.769231h-78.76923zM472.615385 551.384615h78.76923v78.769231h-78.76923z" fill="#FFDD4D" p-id="1244"></path><path d="M472.615385 472.615385h78.76923v78.76923h-78.76923zM393.846154 945.230769h78.769231v78.769231h-78.769231z" fill="#1E2028" p-id="1245"></path><path d="M393.846154 866.461538h78.769231v78.769231h-78.769231z" fill="#FF9343" p-id="1246"></path><path d="M393.846154 787.692308h78.769231v78.76923h-78.769231zM393.846154 708.923077h78.769231v78.769231h-78.769231zM393.846154 630.153846h78.769231v78.769231h-78.769231zM393.846154 551.384615h78.769231v78.769231h-78.769231z" fill="#FFDD4D" p-id="1247"></path><path d="M393.846154 472.615385h78.769231v78.76923h-78.769231zM393.846154 393.846154h78.769231v78.769231h-78.769231zM393.846154 315.076923h78.769231v78.769231h-78.769231zM393.846154 236.307692h78.769231v78.769231h-78.769231zM393.846154 157.538462h78.769231v78.76923h-78.769231zM393.846154 78.769231h78.769231v78.769231h-78.769231zM315.076923 945.230769h78.769231v78.769231h-78.769231z" fill="#1E2028" p-id="1248"></path><path d="M315.076923 866.461538h78.769231v78.769231h-78.769231z" fill="#FF9343" p-id="1249"></path><path d="M315.076923 787.692308h78.769231v78.76923h-78.769231z" fill="#FFDD4D" p-id="1250"></path><path d="M315.076923 708.923077h78.769231v78.769231h-78.769231zM315.076923 630.153846h78.769231v78.769231h-78.769231z" fill="#1E2028" p-id="1251"></path><path d="M315.076923 551.384615h78.769231v78.769231h-78.769231z" fill="#FFDD4D" p-id="1252"></path><path d="M315.076923 472.615385h78.769231v78.76923h-78.769231zM315.076923 393.846154h78.769231v78.769231h-78.769231zM315.076923 315.076923h78.769231v78.769231h-78.769231zM315.076923 236.307692h78.769231v78.769231h-78.769231zM315.076923 157.538462h78.769231v78.76923h-78.769231zM315.076923 78.769231h78.769231v78.769231h-78.769231z" fill="#FF9343" p-id="1253"></path><path d="M315.076923 0h78.769231v78.769231h-78.769231zM236.307692 945.230769h78.769231v78.769231h-78.769231z" fill="#1E2028" p-id="1254"></path><path d="M236.307692 866.461538h78.769231v78.769231h-78.769231z" fill="#FFF1B6" p-id="1255"></path><path d="M236.307692 787.692308h78.769231v78.76923h-78.769231zM236.307692 708.923077h78.769231v78.769231h-78.769231zM236.307692 630.153846h78.769231v78.769231h-78.769231zM236.307692 551.384615h78.769231v78.769231h-78.769231z" fill="#FFDD4D" p-id="1256"></path><path d="M236.307692 472.615385h78.769231v78.76923h-78.769231zM236.307692 393.846154h78.769231v78.769231h-78.769231zM236.307692 315.076923h78.769231v78.769231h-78.769231zM236.307692 236.307692h78.769231v78.769231h-78.769231zM236.307692 157.538462h78.769231v78.76923h-78.769231zM236.307692 78.769231h78.769231v78.769231h-78.769231z" fill="#FFF1B6" p-id="1257"></path><path d="M236.307692 0h78.769231v78.769231h-78.769231zM157.538462 945.230769h78.76923v78.769231H157.538462z" fill="#1E2028" p-id="1258"></path><path d="M157.538462 866.461538h78.76923v78.769231H157.538462z" fill="#FFF1B6" p-id="1259"></path><path d="M157.538462 787.692308h78.76923v78.76923H157.538462zM157.538462 708.923077h78.76923v78.769231H157.538462zM157.538462 630.153846h78.76923v78.769231H157.538462z" fill="#FFDD4D" p-id="1260"></path><path d="M157.538462 551.384615h78.76923v78.769231H157.538462z" fill="#FFF1B6" p-id="1261"></path><path d="M157.538462 472.615385h78.76923v78.76923H157.538462zM157.538462 393.846154h78.76923v78.769231H157.538462zM157.538462 315.076923h78.76923v78.769231H157.538462zM157.538462 236.307692h78.76923v78.769231H157.538462zM157.538462 157.538462h78.76923v78.76923H157.538462zM157.538462 78.769231h78.76923v78.769231H157.538462zM78.769231 866.461538h78.769231v78.769231H78.769231z" fill="#1E2028" p-id="1262"></path><path d="M78.769231 787.692308h78.769231v78.76923H78.769231zM78.769231 708.923077h78.769231v78.769231H78.769231zM78.769231 630.153846h78.769231v78.769231H78.769231z" fill="#FFF1B6" p-id="1263"></path><path d="M78.769231 551.384615h78.769231v78.769231H78.769231zM0 787.692308h78.769231v78.76923H0zM0 708.923077h78.769231v78.769231H0zM0 630.153846h78.769231v78.769231H0z" fill="#1E2028" p-id="1264"></path></svg>
                girlfriend
              </div>
            </template>
            常木幸子
          </el-descriptions-item>
          <el-descriptions-item>
             <template #label>
              <div class="cell-item">
<svg t="1719662420359" class="icon" viewBox="0 0 1024 1024" :style="iconStyle" style="width: 18px;height: 18px" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1099" width="200" height="200"><path d="M232.02 605.57L591.98 137l122.91 140.08-88.41 84.6-57.43 73.03 316.81 249.14-69.01 87.76L503.1 560.73l-47.9 36.81-41.75 70.83-61.07 19.81zM606.79 856.67c0-32.32-26.2-58.53-58.53-58.53H297.12c-32.32 0-58.53 26.2-58.53 58.53v75.27h368.2v-75.27z" fill="#81C8BE" p-id="1100"></path><path d="M659.28 400.46L374.67 176.65l69.67-88.59c21.62-27.5 61.52-32.25 89-10.65L718.3 222.86c13.3 10.46 21.75 25.48 23.75 42.3 2.01 16.81-2.64 33.39-13.11 46.7h-0.01l-69.65 88.6zM452.23 167.37L650 322.9l35.53-45.18c1.73-2.2 1.87-4.49 1.68-6.02-0.18-1.52-0.86-3.71-3.05-5.43L499.2 120.82c-3.55-2.78-8.68-2.16-11.45 1.38l-35.52 45.17zM374.41 723.43c-13.72 0-27.52-4.42-39.11-13.54L150.34 564.44c-27.46-21.61-32.23-61.53-10.65-88.99l0.01-0.01 69.67-88.59 284.6 223.81-69.67 88.59c-12.49 15.88-31.1 24.18-49.89 24.18z m-191.3-213.85c-2.77 3.53-2.16 8.66 1.38 11.45l184.96 145.45c3.54 2.77 8.67 2.16 11.45-1.38l35.52-45.18L218.66 464.4l-35.55 45.18z" fill="#1E4D48" p-id="1101"></path><path d="M821.49 810.39L504.68 561.24l-61.64 78.37-249.8-196.44 232.97-296.26 249.81 196.44-68.2 86.72 316.82 249.14-103.15 131.18zM495.4 483.68l316.82 249.15 34.86-44.35-316.82-249.13 68.2-86.72-162.97-128.16L270.8 433.89l162.96 128.16 61.64-78.37zM638.3 959.56H97.86V856.67c0-47.51 38.65-86.15 86.15-86.15h368.15c47.5 0 86.14 38.64 86.14 86.15v102.89z m-485.21-55.23h429.97v-47.66c0-17.04-13.86-30.92-30.91-30.92H184.01c-17.04 0-30.92 13.87-30.92 30.92v47.66z" fill="#1E4D48" p-id="1102"></path></svg>                技能
              </div>
               v50帮你输官司
             </template>
          </el-descriptions-item>
        </el-descriptions>
        <el-divider></el-divider>
        <div class="skills">
          <h2>技能清单</h2>
          <el-tag>HTML</el-tag>
          <el-tag>CSS</el-tag>
          <el-tag>JavaScript</el-tag>
          <el-tag>Vue 3</el-tag>
          <el-tag>Element Plus</el-tag>
          <el-tag>Java</el-tag>
          <el-tag>Python</el-tag>
          <el-tag>Mysql</el-tag>

          <!-- 更多技能标签 -->
        </div>
        <el-divider></el-divider>
        <div class="projects">
          <h2>项目展示</h2>
          <!-- 项目列表 -->
          <el-row :gutter="20">
            <el-col v-for="(project, index) in projects" :key="index" :span="8">
              <el-card class="project-card">
                <el-image alt="Project Screenshot" class="project-img" src="path-to-project-screenshot.jpg" />
                <div class="project-info">
                  <h3>{{ project.name }}</h3>
                  <p>{{ project.description }}</p>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { computed, ref } from 'vue'
import { ElementPlus, School } from '@element-plus/icons-vue'


const size = ref('large')
const projects = ref([
  {
    name: '项目名称',
    description: '项目简短描述'
  }
  // 更多项目信息
])
const iconStyle = computed(() => {
  const marginMap = {
    large: '8px',
    default: '6px',
    small: '4px'
  }
  return {
    marginRight: marginMap[size.value] || marginMap.default
  }
})
const isHoveredAvatar = ref(false)
const isHoveredCode = ref(false)
</script>

<style scoped>
.cell-item {
  display: flex;
  align-items: center;
}
.el-link {
  margin-right: 10px;
  display: flex;
  align-items: center;
}
.el-link .el-icon {
  margin-right: 5px;
}

.dev-photo {
  transition: transform 0.3s ease;
  cursor: pointer; /* 改变鼠标指针形状 */
}

.zoom-active {
  transform: scale(2);
}

.dev-intro-container {
  max-width: 800px;
  margin: 30px auto;
  text-align: center;
}

.intro-card {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.header {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-bottom: 20px;
}

.dev-photo {
  width: 150px;
  height: 150px;
  border-radius: 50%;
}

.donate-code {
  transition: transform 0.3s ease;
  width: 150px;
}
.el-descriptions {
  margin-bottom: 20px;
}

.el-link {
  display: flex;
  align-items: center;
}
.skills {
  margin-bottom: 20px;
}

.project-card {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.project-img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 10px;
}

.project-info {
  text-align: center;
  margin-top: 10px;
}
</style>